Skip to content

Conversation

@MartinCupela
Copy link
Contributor

@MartinCupela MartinCupela commented Jan 23, 2026

🎯 Goal

Add new styles:

  1. Attachment selector and menu
  2. Area for text composition with composer action buttons (2 types of buttons: primary - send + record - and additional - emoji picker + custom actions)
  3. Attachment previews
  4. Quotes message previews
  5. Link previews

Add new functionalities coming with design refresh:

  1. Content preview of attachment previews:
  • preview images in a modal gallery,
  • preview videos in modal gallery,
  • document content in new browser tabs
  • use global AudioPlayer API for previewing audio attachments
  1. Track cooldown state in LLC and subscribe to its reactive state
  2. Track textarea height change to achieve the last line of overflowing text to be only partially visible

###? Uknown?

  • Command selection (and suggestions list) designs
  • Mentions suggestions list designs
  • Poll composition designs
  • Editing message designs
  • Voice message recording and attachment workflow
  • Send reply to main message list
  • Link preview loading design, Link preview image fallback?
  • Drag and drop area styling

Out of scope

  • Location sharing workflow and components

🛠 Implementation details

Provide a description of the implementation

🎨 UI Changes

Add relevant screenshots

export const IconPause = ({ className, ...props }: ComponentProps<'svg'>) => (
<svg
{...props}
className={clsx('str-chat__icon--pause', className)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it would be good if all icons have a shared selector str-chat__icon so one can target all icons at once, instead of writing hundreds of individual class names.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will add a BaseIcon wrapper that will inject that class.

@github-actions
Copy link

github-actions bot commented Jan 26, 2026

Size Change: +12.6 kB (+4.35%)

Total Size: 303 kB

Filename Size Change
./dist/Channel-B3YXRWEy.js 24.4 kB +24.4 kB (new file) 🆕
./dist/Channel-pqo4jV1s.js 0 B -24.4 kB (removed) 🏆
./dist/ChannelPreview-BNyNO58P.js 0 B -17.8 kB (removed) 🏆
./dist/cjs/emojis.js 3.85 kB +554 B (+16.83%) ⚠️
./dist/cjs/experimental.js 5.8 kB +6 B (+0.1%)
./dist/cjs/index.js 174 kB +7.86 kB (+4.74%) 🔍
./dist/css/emojis.css 113 B +113 B (new file) 🆕
./dist/css/index.css 9.55 kB +3.39 kB (+54.97%) 🆘
./dist/MessageInputContext-Buw2XInb.js 0 B -314 B (removed) 🏆
./dist/useIsCooldownActive-Q530Ljhe.js 524 B +524 B (new file) 🆕
./dist/useMessageReminder-DIuVMQiS.js 18.2 kB +18.2 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
./dist/audioProcessing-BbOs2wMd.js 1.32 kB
./dist/cjs/mp3-encoder.js 1.27 kB
./dist/css/v2/emoji-mart.css 1.84 kB
./dist/css/v2/emoji-replacement.css 300 B
./dist/css/v2/index.css 39.4 kB
./dist/css/v2/index.layout.css 22.8 kB

compressed-size-action

@MartinCupela MartinCupela force-pushed the feat/refresh/message-composer branch from 87f4b53 to a4ae4bc Compare January 26, 2026 12:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants